import React from 'react'
import Css from './style/common.module.css'
import Fanhui from './img/返回箭头.png'
import Arr from './img/arr.jpg'

class Gengduoxindie extends React.Component{
    constructor(){
        super()
        this.state={
          arr:[],
          arr2:[]
        }
      }
    componentDidMount(){
        fetch('http://106.12.79.128:666/top/album?offset=0&limit=30')
        .then(body=>body.json())
        .then(res=>{
            // console.log(res.result.songs)
            this.setState({
              arr:res.albums
            })
        })
        fetch('http://106.12.79.128:666/top/album?offset=10&limit=3')
        .then(body=>body.json())
        .then(res=>{
            // console.log(res.result.songs)
            this.setState({
              arr2:res.albums
            })
        })
    }
    dianjiimg(){
        this.props.history.goBack();
    }
    render(){
        return(
            <div className={Css.temp}>
                <div className={Css.top}>
                    <img src={Fanhui} alt="" className={Css.fanhui} onClick={this.dianjiimg.bind(this)}/>
                    <p className={Css.FanhuiP}>新碟上架</p>
                </div>
                <div className={Css.szzj}>
                    <div className={Css.shuzi}>
                        <p className={Css.shuziP1}>数字专辑</p>
                        {/* <p className={Css.shuziP2}>更多专辑</p> */}
                    </div>
                        <ul>{
                            this.state.arr2.map((item,index)=>{
                            return(
                                <li key={index}  className={Css.liii}>
                                    <div className={Css.Img1}>
                                        <img src={item.blurPicUrl} alt="" className={Css.arrImg1}/>
                                        <img src={Arr} alt="" className={Css.ArrImg1}/>
                                    </div>
                                    
                                    <p className={Css.namep11}> {item.name}</p>
                                    <p className={Css.namep21}>{item.artists[0].name}</p>
                                    
                                </li>
                            )})
                        }</ul>
                    <div className={Css.tupian}></div>
                </div>
                                    
                <div className={Css.weekxd}>
                    <p  className={Css.weekxdP}>本周新碟</p>
                    <ul>{
                        this.state.arr.map((item,index)=>{
                        return(
                            <li key={index}  className={Css.lii}>
                                <div className={Css.Img}>
                                    <img src={item.blurPicUrl} alt="" className={Css.arrImg}/>
                                    <img src={Arr} alt="" className={Css.ArrImg}/>
                                </div>
                                
                                <p className={Css.namep1}> {item.name}</p>
                                <p className={Css.namep2}>{item.artists[0].name}</p>
                                
                            </li>
                        )})
                    }</ul>
                </div>
            </div>
        )
    }
}

export default Gengduoxindie